<template>
	<view class="home">
		<view class="imgLoop">
			<swiper indicator-dots circular autoplay interval='2000'>
				<swiper-item v-for="imgUrl in imgLoop" :key='imgUrl.objectId'>
					<image :src="imgUrl.url"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 导航 -->
		<view class="nav">
			<view class="nav_item" v-for="item in navi_item" @click="gotoOther(item.itemPath)">
				<view :class="item.itemClass"></view>
				<text>{{item.itemText}}</text>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="hotGoods">
			<view class="tit">推荐商品</view>
			<goodslist :hotGoods='hotGoods' @gotoD="gotoDetail"></goodslist>
		</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goodsList/goodsList.vue'
	import Bmob from '../../bmob/Bmob-2.2.4.min.js'
	//初始化
	Bmob.initialize("5f81d295c337fcde", "202020");
	export default {
		data() {
			return {
				title: 'Hello',
				imgLoop: [],
				hotGoods: [],
				navi_item: [{
						itemClass: 'iconfont icon-icon-servicelevel',
						itemText: '海东超市',
						itemPath: '../hdmarkt/hdmarkt'
					},
					{
						itemClass: 'iconfont icon-kefu',
						itemText: '联系我们',
						itemPath: '../contactus/contactus'
					},
					{
						itemClass: 'iconfont icon-jianlijiankong',
						itemText: '社区图片',
						itemPath: '../sqimg/sqimg'
					},
					{
						itemClass: 'iconfont icon-kuozhangongneng',
						itemText: '学习视频',
						itemPath: '../stuvideo/stuvideo'
					},

				]
			}
		},
		onLoad() {
			console.log('执行index页面的onLoad')
			this.getMessageFromBmob('imgLoop');
			this.getMessageFromBmob('hot_goods');

		},
		methods: {
			getMessageFromBmob(tableName) {
				const query = Bmob.Query(tableName)
				query.find().then(res => {
					for (var item of res) {
						if (tableName == 'hot_goods') {
							// console.log(item)
							this.hotGoods.push(item)
						} else if (tableName == 'imgLoop') {
							this.imgLoop.push(item)
						}

					}
				})
			},
			gotoOther(url){
				uni.navigateTo({
					url:url
				})
				console.log(url)
			},
			//点击商品列表跳转商品详情页面
			gotoDetail(id){
				// console.log("我是index111")
				uni.navigateTo({
					url:'../goods-detail/goods-detail?id='+id
				})
			}
		},
		components:{
			goodslist:goodsList
		}
	}
</script>

<style lang="scss">
	.home {
		.imgLoop {
			swiper {
				width: 750rpx;
				height: 380rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.nav {
			display: flex;
			margin: 10px;

			.nav_item {
				width: 25%;
				text-align: center;

				text {
					font-size: 30rpx;
				}

				view {
					height: 120rpx;
					width: 120rpx;
					background: $my-uni;
					border-radius: 60rpx;
					margin: 10px auto;
					line-height: 120rpx;
					color: #FFFFFF;
					font-size: 50rpx;
				}
			}
		}

		.hotGoods {
			background: #eee;
			overflow: hidden;

			.tit {
				height: 50px;
				line-height: 50px;
				color: $my-uni;
				text-align: center;
				letter-spacing: 20px;
				background: #FFFFFF;
				margin: 7rpx 0;
				font-size: 35rpx;
			}
		}


	}
</style>
